<template>
  <div class="title">
    <div class="top">
      <div></div>
      <div>{{ contentTableConfig!.title }}</div>
      <div class="top_right">
        <span class="item" @click="handle_wiki">Wiki</span>
      </div>
    </div>
    <div class="line"></div>
  </div>
  <div class="page-content-new">
    <lz-table :listData="dataList" :listCount="dataCount" v-bind="contentTableConfig" v-model:page="pageInfo">
      <!-- 1.header中的插槽 -->
      <template #headerLeft>
        <slot name="headerLeft"></slot>
      </template>

      <template #headerHandler>
        <el-button v-if="isCreate" type="primary" size="default" @click="handleNewClick"> Add </el-button>
        <el-button type="primary" size="default" @click="handleFilter"> Filter </el-button>
        <el-button type="primary" size="default" @click="handleExport"> Export </el-button>
        <slot name="headerCust"></slot>
      </template>

      <!-- 2.列中的插槽 -->
      <template #status="scope">
        <el-button plain size="mini" :type="scope.row.enable ? 'success' : 'danger'">
          {{ scope.row.enable ? 'Enable' : 'Disable' }}
        </el-button>
      </template>
      <template #createAt="scope">
        <!-- <span>{{ $filters.formatTime(scope.row.createAt) }}</span> -->
        <span>{{ scope.row.create_at }}</span>
      </template>
      <template #updateAt="scope">
        <!-- <span>{{ $filters.formatTime(scope.row.updateAt) }}</span> -->
        <span>{{ scope.row.update_at }}</span>
      </template>
      <template #handler="scope">
        <div class="handle-btns">
          <el-button v-if="isUpdate" type="success" size="small" round @click="handleEditClick(scope.row)">
            Edit
          </el-button>
          <el-button v-if="isDelete" type="danger" size="small" round @click="handleDeleteClick(scope.row)"
            >Delete</el-button
          >
        </div>
      </template>

      <!-- 在page-content中动态插入剩余的插槽 -->
      <template v-for="item in otherPropSlots" :key="item.prop" #[item.slotName]="scope">
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </lz-table>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps, ref, watch, defineExpose } from 'vue'
import { useStore } from '@/store'
import LzTable from '@/base-ui/table'
import { usePermission } from '@/hooks/use-permission'
import { BASE_ROUTE } from '@/service/request/config'
import { getPageListData } from '@/service/main/system/system'

const props = defineProps({
  contentTableConfig: {
    type: Object,
    require: true
  },
  pageName: {
    type: String,
    required: true
  },
  tableName: {
    type: String,
    required: true
  }
})
const emits = defineEmits(['newBtnClick', 'editBtnClick', 'filterBtnClick'])

const store = useStore()

// 0.获取操作的权限
const isCreate = usePermission(props.tableName, 'create')
const isUpdate = usePermission(props.tableName, 'update')
const isDelete = usePermission(props.tableName, 'delete')
// console.log('isCreate', isCreate)
// console.log('isUpdate', isUpdate)
// console.log('isDelete', isDelete)
// const isCreate = ref(false)
// const isUpdate = ref(true)
// const isDelete = ref(true)
// const isSelect = usePermission(props.pageName, 'select')

// 1.双向绑定pageInfo
const pageInfo = ref({ currentPage: 1, pageSize: 10 })
watch(pageInfo, () => getPageData())

// 2.发送网络请求
// console.log(isSelect)
const getPageData_old = (queryInfo: any = {}) => {
  // if (!isSelect) return
  console.log('1111')
  store.dispatch('system/getPageListAction', {
    pageName: props.pageName,
    queryInfo: {
      offset: (pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
      size: pageInfo.value.pageSize,
      ...queryInfo
    }
  })
}
const dataList = ref()
const dataCount = ref()
const getPageData = async (queryInfo: any = {}) => {
  const url = `/${props.pageName}/get_${props.tableName}_list`
  const res = await getPageListData(url, {
    offset: (pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
    size: pageInfo.value.pageSize,
    ...queryInfo
  })
  dataList.value = res.data.list
  dataCount.value = res.data.totalCount
}
getPageData()

// 3.从vuex中获取数据
// const dataList = computed(() =>
//   store.getters[`system/pageListData`](props.pageName)
// )
// const dataCount = computed(() =>
//   store.getters[`system/pageListCount`](props.pageName)
// )
// console.log('1111111')
// console.log(props.pageName)
// console.log(dataList)

// 4.获取其他的动态插槽名称
const otherPropSlots = props.contentTableConfig?.propList.filter((item: any) => {
  if (item.slotName === 'status') return false
  if (item.slotName === 'createAt') return false
  if (item.slotName === 'updateAt') return false
  if (item.slotName === 'handler') return false
  return true
})

// 5.删除/编辑/新建操作
const handleDeleteClick = (item: any) => {
  // console.log(item)
  store.dispatch('system/deletePageDataAction', {
    pageName: props.pageName,
    id: item.id
  })
}
const handleNewClick = () => {
  emits('newBtnClick')
}
const handleEditClick = (item: any) => {
  emits('editBtnClick', item)
}
const handleFilter = () => {
  emits('filterBtnClick')
}
const handleExport = () => {
  console.log('click export...')
  // emits('exportBtnClick')
}

const handle_wiki = () => {
  console.log('handle click wiki, please use pagename_wiki.pdf and put it in backend folder static/output/wiki')
  window.open(BASE_ROUTE + `/static/output/wiki/${props.pageName}_wiki.pdf`, '_blank')
}

defineExpose({ getPageData })
</script>

<style scoped lang="less">
.page-content-new {
  padding: 20px;
  border-top: 20px solid #f5f5f5;
}
.title {
  font-size: 28px;
  font-weight: 600;
  .noted {
    font-size: 14px;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    background: red;
  }
  .top {
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    .top_right {
      margin-right: 20px;
      font-size: 18px;
      color: blueviolet;
      text-align: center;
      line-height: 32px;
    }
    .back {
      margin-left: 10px;
      font-weight: 700;
      font-size: 20px;
      cursor: pointer;
    }
  }
  .line {
    width: 98%;
    height: 3px;
    margin: 10px auto;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
  }
  .item {
    margin-left: 10px;
    cursor: pointer;
    text-decoration: underline;
  }
  .item:hover {
    color: blueviolet;
    opacity: 0.8;
  }
}
</style>
